import React from 'react';
import {Dimensions, StyleSheet, Text, View} from 'react-native';
import {formatDate, getRealSize} from '../../utils';
import FastImage from 'react-native-fast-image';

class TextMessage extends React.PureComponent {
  render() {
    const {content, date, self, avatar, name} = this.props;
    return (
      <View style={[Styles.container, self && Styles.self]}>
        <View style={Styles.avatar}>
          <FastImage
            style={Styles.image}
            source={{
              uri: avatar,
              priority: FastImage.priority.normal,
            }}
            resizeMode={FastImage.resizeMode.contain}
          />
        </View>
        <View style={Styles.content}>
          <View style={Styles.head}>
            {self ? (
              <React.Fragment>
                <Text style={Styles.time}>
                  {formatDate(date, 'YYYY-MM-DD HH:mm')}
                </Text>
                <Text style={[Styles.title, Styles.selfMessage]}>{name}</Text>
              </React.Fragment>
            ) : (
              <React.Fragment>
                <Text style={Styles.title}>{name}</Text>
                <Text style={Styles.time}>
                  {formatDate(date, 'YYYY-MM-DD HH:mm')}
                </Text>
              </React.Fragment>
            )}
          </View>
          <View style={Styles.card}>
            <Text style={[Styles.message, self && Styles.selfMessage]}>
              {content}
            </Text>
          </View>
        </View>
      </View>
    );
  }
}

export default TextMessage;

const Styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    paddingHorizontal: getRealSize(15),
    paddingBottom: getRealSize(15),
  },
  self: {
    flexDirection: 'row-reverse',
  },
  image: {
    width: getRealSize(32),
    height: getRealSize(32),
    backgroundColor: 'white',
    borderRadius: getRealSize(16),
  },
  avatar: {
    width: getRealSize(38),
  },
  content: {
    paddingHorizontal: getRealSize(12),
    width: Dimensions.get('screen').width * 0.7,
  },
  head: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  title: {
    flex: 1,
    fontSize: getRealSize(12),
    color: '#757575',
  },
  time: {
    width: getRealSize(128),
    fontSize: getRealSize(12),
    color: '#757575',
  },
  card: {},
  message: {
    padding: getRealSize(8),
    marginTop: getRealSize(8),
    backgroundColor: 'white',
    color: '#333',
  },
  selfMessage: {
    textAlign: 'right',
  },
});
